<template>
  <Header></Header>

  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3">
        <!-- 文章详情 -->
        <!-- 文章卡片父容器 -->
        <div class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"
          style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
          <!-- 面包屑 -->
          <nav class="flex text-gray-400" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
              <li class="inline-flex items-center">
                <a @click="router.push('/')"
                  class="hand-style inline-flex items-center text-sm font-medium hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                  <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                    viewBox="0 0 20 20">
                    <path
                      d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
                  </svg>
                  首页
                </a>
              </li>
              <li>
                <div class="flex items-center">
                  /
                  <a class=" ml-1 text-sm font-medium md:ml-3 dark:text-gray-400 dark:hover:text-white">正文</a>
                </div>
              </li>
            </ol>
          </nav>
          <!-- 文章 -->
          <article>
            <!-- 文章标题 -->
            <h1 class="mt-4 font-bold text-4xl text-center dark:text-white">{{ article.title }}</h1>
            <!-- 文章 meta 信息，如发布时间等 -->
            <div class="text-gray-400 flex items-center mt-5 text-sm">
              <!-- 发布时间 -->
              <div class="flex items-center">
                <svg class="inline w-3 h-3 mr-2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                  fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                </svg>
                <span class="mr-1 hidden md:inline">发表于</span> {{ article.createTime }}
              </div>

              <!-- 分类 -->
              <div class="flex items-center">
                <svg class="inline w-3 h-3 ml-2 mr-2 text-gray-400" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z" />
                </svg>
                <span class="hidden md:inline mr-1">分类于</span>
                <a @click="goCategoryArticleListPage(article.categoryId, article.categoryName)"
                  class="hand-style mr-1 hover:underline">{{ article.categoryName }}</a>
              </div>

              <!-- 阅读量 -->
              <div class="flex items-center">
                <svg class="inline w-3 h-3 ml-2 mr-2 text-gray-400" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 14">
                  <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                    <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
                    <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z" />
                  </g>
                </svg>
                <span class="mr-1 hidden md:inline">阅读量</span> {{ article.readNum }}
              </div>

              <!-- 字数 -->
              <div class="flex items-center">
                <svg class="inline w-3 h-3 ml-2 mr-2 text-gray-400" t="1714379560776" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="8855" width="200" height="200">
                  <path
                    d="M841.155053 1024H181.382826c-54.766249-0.644309-98.579249-44.457308-98.579249-99.223558V108.437174C82.803577 53.670924 126.616576 9.857925 181.382826 9.213616h385.296671c23.839426 0 47.034544 9.020323 64.430882 25.128044l277.05279 245.481658c21.262191 18.684956 33.504058 45.101617 32.85975 73.451205v571.501919c0 26.416661-10.308941 52.189014-28.993897 70.229661-19.329264 18.684956-44.457308 28.993897-70.873969 28.993897zM148.523076 108.437174v816.339268c0 18.040647 14.819103 32.85975 32.85975 32.85975h659.772227c18.040647 0 32.215441-14.819103 32.21544-32.85975v-571.501919a30.346945 30.346945 0 0 0-10.308941-23.839426l-277.05279-245.481658a33.053042 33.053042 0 0 0-21.9065-8.376015H181.382826c-18.040647 0-32.85975 14.819103-32.85975 32.85975z"
                    p-id="8856" fill="#9ca3af"></path>
                  <path
                    d="M446.515903 356.947084h-160.432895a33.826213 33.826213 0 0 1-24.483735-32.215441c0-14.819103 10.308941-27.705279 24.483735-32.215441h160.432895c14.174794-3.865853 28.349588 1.288618 36.725603 12.886176 8.376015 11.597559 8.376015 27.06097 0 38.658529s-22.550809 16.752029-36.725603 12.886177z m221.642233 194.581262h-382.075128a33.053042 33.053042 0 0 1-26.416661-32.215441c0-16.10772 10.95325-28.993897 26.416661-32.215441h382.075128c14.819103 3.221544 26.416661 16.10772 26.416661 32.215441 0 15.463412-11.597559 28.993897-26.416661 32.215441z m0 194.581262h-382.075128a33.826213 33.826213 0 0 1-24.483735-32.215441c0-14.819103 10.308941-28.349588 24.483735-32.215441h382.075128c14.174794 3.865853 23.839426 17.396338 23.839426 32.215441 0 14.819103-9.664632 28.349588-23.839426 32.215441z m216.487762-384.652363h-321.510099c-9.020323 0-17.396338-3.221544-23.839426-9.020323a35.952432 35.952432 0 0 1-9.664633-23.839426V42.524382c-3.865853-13.530485 1.288618-28.349588 12.886177-36.081294a32.85975 32.85975 0 0 1 38.658529 0c11.597559 7.731706 16.752029 22.550809 12.886176 36.081294v253.213364h287.361731c12.886176-2.577235 26.416661 3.221544 33.504059 14.174794 7.731706 10.95325 7.731706 25.128044 0 36.725603-7.087397 10.95325-20.617882 16.10772-33.504059 13.530485z"
                    p-id="8857" fill="#9ca3af"></path>
                </svg>
                <span class="mr-1">约 {{ article.totalWords }} 字</span>
              </div>

              <!-- 大约阅读时间 -->
              <div class="items-center hidden md:flex">
                <svg class="inline w-3 h-3 ml-2 mr-2 text-gray-400" t="1714379815697" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="11164" width="200" height="200">
                  <path
                    d="M512 0C228.072727 0 0 228.072727 0 512s228.072727 512 512 512 512-228.072727 512-512S795.927273 0 512 0z m0 949.527273c-242.036364 0-437.527273-195.490909-437.527273-437.527273S269.963636 74.472727 512 74.472727s437.527273 195.490909 437.527273 437.527273-195.490909 437.527273-437.527273 437.527273z"
                    p-id="11165" fill="#9da3ae"></path>
                  <path d="M502.690909 293.236364H428.218182V605.090909H740.072727v-69.818182h-237.381818z" p-id="11166"
                    fill="#9da3ae"></path>
                </svg>
                <span class="mr-1 hidden md:inline">{{ article.readTime }}</span>
              </div>
            </div>

            <!-- 正文 -->
            <div :class="{ 'dark': isDark }">
              <div ref="articleContentRef" class="mt-5 article-content" v-viewer v-html="article.content"></div>
            </div>
            <!-- 最后编辑时间 -->
            <div class="flex items-center text-gray-500 text-sm">
              <svg t="1705985882454" class="icon inline-block w-4 h-4 mr-1 mt-5 mb-5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7701" width="200" height="200"><path d="M200.405333 912.938667a90.965333 90.965333 0 0 1-89.6-93.866667v-614.4a93.866667 93.866667 0 0 1 89.6-93.866667h473.6a91.050667 91.050667 0 0 1 89.6 93.866667v183.466667a33.621333 33.621333 0 0 1-34.133333 34.133333 31.402667 31.402667 0 0 1-34.133333-34.133333v-183.466667a28.586667 28.586667 0 0 0-25.6-29.866667h-473.6c-17.066667 0-25.6 12.8-25.6 29.866667v614.4a28.373333 28.373333 0 0 0 25.6 29.866667h256a33.493333 33.493333 0 0 1 34.133333 34.133333 26.794667 26.794667 0 0 1-29.866667 29.866667z m354.133334-4.266667a47.872 47.872 0 0 1-34.133334-12.8 41.130667 41.130667 0 0 1-12.8-42.666667l12.8-102.4 234.666667-234.666666a51.584 51.584 0 0 1 68.266667 0l76.8 76.8a51.584 51.584 0 0 1 0 68.266666l-234.666667 234.666667-102.4 12.8z m29.866666-128l-8.533333 64 64-8.533333 209.066667-209.066667-55.466667-55.466667z m-341.333333-68.266667a33.664 33.664 0 0 1-34.133333-34.133333 31.36 31.36 0 0 1 34.133333-34.133333h187.733333a34.133333 34.133333 0 0 1 0 68.266666z m0-179.2a33.749333 33.749333 0 0 1-34.133333-34.133333 31.488 31.488 0 0 1 34.133333-34.133333h264.533333a34.133333 34.133333 0 0 1 0 68.266666z m0-179.2a33.536 33.536 0 0 1-34.133333-34.133333 31.488 31.488 0 0 1 34.133333-34.133333h384a34.133333 34.133333 0 1 1 0 68.266666z" p-id="7702" fill="#707070"></path></svg>
              最后编辑于 {{ article.updateTime }}
            </div>
            <!-- 标签集合 -->
            <div v-if="article.tags && article.tags.length > 0" class="mt-5">
              <span @click="goTagArticleListPage(tag.id, tag.name)" v-for="(tag, index) in article.tags" :key="index"
                class="hand-style inline-block mb-1 cursor-pointer bg-green-100 text-green-800 text-xs font-medium mr-2 px-3 py-1 rounded-full hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300">
                # {{ tag.name }}
              </span>
            </div>
            <!-- 上下篇 -->
            <nav class="flex flex-row mt-7">
              <!-- basis-1/2 用于占用 flex 布局的一半空间 -->
              <div class="basis-1/2">
                <!-- h-full 指定高度占满 -->
                <a v-if="article.preArticle" @click="router.push('/article/' + article.preArticle.articleId)"
                  class="cursor-pointer flex flex-col h-full p-4 mr-3 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-sky-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <div>
                    <svg class="inline w-3.5 h-3.5 mr-2 mb-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                      fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 5H1m0 0 4 4M1 5l4-4"></path>
                    </svg>
                    上一篇
                  </div>
                  <div>{{ article.preArticle.articleTitle }}</div>
                </a>
              </div>

              <div class="basis-1/2">
                <!-- text-right 指定文字居右显示 -->
                <a v-if="article.nextArticle" @click="router.push('/article/' + article.nextArticle.articleId)"
                  class="cursor-pointer flex flex-col h-full text-right p-4 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-sky-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <div>
                    下一篇
                    <svg class="inline w-3.5 h-3.5 ml-2 mb-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                      fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M1 5h12m0 0L9 1m4 4L9 9"></path>
                    </svg>
                  </div>
                  <div>{{ article.nextArticle.articleTitle }}</div>
                </a>
              </div>
            </nav>
          </article>
        </div>
        <!-- 评论组件 -->
        <Comment></Comment>
      </div>

      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1">

        <div>
          <!-- 博主信息 -->
          <UserInfoCard></UserInfoCard>

          <!-- 分类 -->
          <CategoryListCard></CategoryListCard>

          <!-- 标签 -->
          <TagListCard></TagListCard>
        </div>

        <!-- 文章目录 -->
        <Toc></Toc>

      </aside>
    </div>

  </main>

  <!-- 返回顶部 -->
  <ScrollToTopButton></ScrollToTopButton>

  <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import UserInfoCard from '@/layouts/frontend/components/UserInfoCard.vue'
import TagListCard from '@/layouts/frontend/components/TagListCard.vue'
import CategoryListCard from '@/layouts/frontend/components/CategoryListCard.vue'
import { getArticleDetailService } from '@/api/frontend/article'
import ScrollToTopButton from '@/layouts/frontend/components/ScrollToTopButton.vue'
import Comment from '@/components/Comment.vue'
import { useRoute, useRouter } from 'vue-router'
import { ref, watch, onMounted, nextTick } from 'vue'
import hljs from 'highlight.js'
import Toc from '@/layouts/frontend/components/Toc.vue'
// 代码高亮样式
import 'highlight.js/styles/tokyo-night-dark.css'
import { useDark } from '@vueuse/core'

// 是否是暗黑模式
const isDark = useDark()

const route = useRoute()
const router = useRouter()

// 监听路由变化
watch(route, (newRoute, oldRoute) => {
  // 重新渲染文章详情
  getArticleDetail(newRoute.params.articleId)
})

// 文章详情数据
const article = ref({})

// 获取文章详情数据
const getArticleDetail = async (articleId) => {
  // 发送请求获取文章详情数据
  const res = await getArticleDetailService(articleId)
  // 该文章不存在(错误码为 20010)
  if (!res.success && res.errorCode == '20010') {
    // 手动跳转 404 页面
    router.push({name : 'NotFound'})
    return
  } else if (res.success) {
    article.value = res.data
    
    nextTick(() => {
        // 获取所有 pre code 节点
        let highlight = document.querySelectorAll('pre code')
        // 循环高亮
        highlight.forEach((block) => {
            hljs.highlightElement(block)
        })

        // 获取所有的 pre 节点
        let preElements = document.querySelectorAll('pre')
        preElements.forEach(preElement => {
            // 找到第一个 code 元素
            let firstCode = preElement.querySelector('code');
            if (firstCode) {
                let copyCodeBtn = '<button class="hidden copy-code-btn flex items-center justify-center"><div class="copy-icon"></div></button>'
                firstCode.insertAdjacentHTML('beforebegin', copyCodeBtn);

                // 获取刚插入的按钮
                let copyBtn = firstCode.previousSibling;
                copyBtn.addEventListener('click', () => {
                    // 添加 copied 样式
                    copyBtn.classList.add('copied');
                    copyToClipboard(preElement.textContent)
                    // 1.5 秒后移除 copied 样式
                    setTimeout(() => {
                        copyBtn.classList.remove('copied');
                    }, 1500);
                });
            }
            // 添加事件监听器
            preElement.addEventListener('mouseenter', handleMouseEnter);
            preElement.addEventListener('mouseleave', handleMouseLeave);
        })
    })
  }
}
getArticleDetail(route.params.articleId)

// 复制内容到剪切板
function copyToClipboard(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
}

const handleMouseEnter = (event) => {
    // 鼠标移入，显示按钮
    let copyBtn = event.target.querySelector('button');
    if (copyBtn) {
        copyBtn.classList.remove('hidden');
        copyBtn.classList.add('block');
    }
}

const handleMouseLeave = (event) => {
    // 鼠标移出，隐藏按钮
    let copyBtn = event.target.querySelector('button');
    if (copyBtn) {
        copyBtn.classList.add('hidden');
    }
}


// 点击分类 跳转分类-文章列表页
const goCategoryArticleListPage = (id, name) => {
  // 跳转时通过 query 携带参数（分类ID、分类名称）
  router.push({ path: '/category/article/list', query: { id, name } })
}

// 点击标签 跳转标签-文章列表页
const goTagArticleListPage = (id, name) => {
  // 跳转时通过 query 携带参数（标签ID、标签名称）
  router.push({ path: '/tag/article/list', query: { id, name } })
}


</script>
<style scoped>
/*======================= h1, h2, h3, h4, h5, h6 标题样式 =======================*/
::v-deep(.article-content h1,
  .article-content h2,
  .article-content h3,
  .article-content h4,
  .article-content h5,
  .article-content h6) {
  color: #292525;
  line-height: 150%;
  font-family: PingFang SC, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}

::v-deep(.article-content h2) {
  line-height: 1.5;
  font-weight: 700;
  font-synthesis: style;
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 26px;
  line-height: 140%;
  border-bottom: 1px solid rgb(241 245 249);
  padding-bottom: 15px;
}

::v-deep(.article-content h3) {
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 16px;
  font-weight: 600;
}

::v-deep(.article-content h4) {
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 16px;
  font-weight: 600;
}

::v-deep(.article-content h5) {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 14px;
  font-weight: 600;
}

::v-deep(.article-content h6) {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 14px;
  font-weight: 600;
}

/*======================= p 段落样式 =======================*/
::v-deep(.article-content p) {
  letter-spacing: .3px;
  margin: 0 0 20px;
  line-height: 30px;
  color: #4c4e4d;
  font-weight: 400;
  word-break: normal;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
}

/*======================= blockquote 引用样式 =======================*/
::v-deep(.article-content blockquote) {
  border-left: 2.3px solid rgb(52, 152, 219);
  quotes: none;
  background: rgb(236, 240, 241);
  color: #777;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 24px;
}

/*========== 设置 blockquote 中最后一个 p 标签的 margin-bottom 为 0 ==========*/
::v-deep(.article-content blockquote p:last-child) {
  margin-bottom: 0;
}

/*======================= 斜体样式 =======================*/
::v-deep(.article-content em) {
  color: #c849ff;
}

/*======================= 超链接样式 =======================*/
::v-deep(.article-content a) {
  color: #167bc2;
}

::v-deep(.article-content a:hover) {
  text-decoration: underline;
}

/*======================= ul 样式 =======================*/
::v-deep(.article-content ul) {
  padding-left: 2rem;
}

::v-deep(.article-content > ul) {
  margin-bottom: 20px;
}

::v-deep(.article-content ul li) {
  list-style-type: disc;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
}

::v-deep(.article-content ul li p) {
  margin-bottom: 0 !important;
}

::v-deep(.article-content ul ul li) {
  list-style-type: square;
}

/*======================= ol 样式 =======================*/
::v-deep(.article-content ol) {
  list-style-type: decimal;
  padding-left: 2rem;
}

/*======================= 图片样式 =======================*/
::v-deep(.article-content img) {
  max-width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

::v-deep(.article-content img:hover,
  img:focus) {
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .15);
}

/*====================== 图片下的描述文字 ======================*/
::v-deep(.image-caption) {
  min-width: 20%;
  max-width: 80%;
  min-height: 43px;
  display: block;
  padding: 10px;
  margin: 0 auto;
  font-size: 13px;
  color: #999;
  text-align: center;
}

/*======================= code 样式 =======================*/
::v-deep(.article-content code:not(pre code)) {
  padding: 2px 4px;
  margin: 0 2px;
  font-size: 95% !important;
  border-radius: 4px;
  color: rgb(41, 128, 185);
  background-color: rgba(27, 31, 35, 0.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/*====================== pre code 样式 ======================*/
::v-deep(code) {
    font-size: 98%;
}

::v-deep(pre) {
    margin-bottom: 20px;
    padding-top: 30px;
    background: #21252b;
    border-radius: 6px;
    position: relative;
}

::v-deep(pre code.hljs) {
    padding: 0.7rem 1rem;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

::v-deep(pre:before) {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 10px;
    margin-top: -19px;
    margin-left: 10px;
    position: absolute;
    width: 10px;
}

/*======================= 表格样式 =======================*/
::v-deep(table) {
  margin-bottom: 20px;
  width: 100%;
}

::v-deep(table tr) {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

::v-deep(table th) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

::v-deep(table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

::v-deep(table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}

/*======================= hr 分割线 =======================*/
::v-deep(hr) {
  margin-bottom: 20px;
}

/*======================= copy样式 =======================*/
::v-deep(.copy-code-btn) {
    border-width: 0;
    cursor: pointer;
    position: absolute;
    top: 0.3em;
    right: 0.3em;
    z-index: 5;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 0.5rem;
    opacity: 0;
    transition: opacity .4s;
    opacity: 1
}

::v-deep(.copy-code-btn:hover) {
    background: #2f3542;
}

::v-deep(.copy-icon) {
    --copy-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
    background: currentcolor;
    -webkit-mask-image: var(--copy-icon);
    mask-image: var(--copy-icon);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1em;
    mask-size: 1em;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.625rem;
    color: #9e9e9e;
    font-size: 1.25rem;
}

::v-deep(.copied) {
    display: flex;
    background: #2f3542;
}

::v-deep(.copied:after) {
    content: "已复制";
    position: absolute;
    top: 0;
    right: calc(100% + .25rem);
    display: block;
    height: 1.5rem;
    padding: .625rem;
    border-radius: .5rem;
    background: #2f3542;
    color: #9e9e9e;
    font-weight: 500;
    line-height: 0.3rem;
    white-space: nowrap;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
}

::v-deep(.copied .copy-icon) {
    --copied-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--copied-icon);
    mask-image: var(--copied-icon);
}
</style>
<!-- 暗黑模式样式 -->
<style scoped>
/* h1, h2, h3, h4, h5, h6 标题样式 */
::v-deep(.dark .article-content h2) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240/var(--tw-text-opacity));
    border-bottom: 1px solid;
    border-color: rgb(55 65 81 / 1);
}

::v-deep(.dark .article-content h3) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240/var(--tw-text-opacity));
}

::v-deep(.dark .article-content h4) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240/var(--tw-text-opacity));
}

::v-deep(.dark .article-content h5) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240/var(--tw-text-opacity));
}

::v-deep(.dark .article-content h6) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240/var(--tw-text-opacity));
}

/* p 段落样式 */
::v-deep(.dark .article-content p) {
    color: #9e9e9e;
}

/* blockquote 引用样式 */
::v-deep(.dark .article-content blockquote) {
    quotes: none;
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    border-left: 2.3px solid #555;
    color: #666;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 0.25rem 0 0.25rem 1rem;
}

/* ul 样式 */
::v-deep(.dark .article-content ul) {
    padding-left: 2rem;
    color: #9e9e9e;
}

/* ol 样式 */
::v-deep(.dark .article-content ol) {
    color: #9e9e9e;
}

/* code 样式 */
::v-deep(.dark .article-content code:not(pre code)) {
    padding: 2px 4px;
    margin: 0 2px;
    font-size: .85em;
    border-radius: 5px;
    color: #abb2bf;
    background: #333;
    /* background-color: rgba(27, 31, 35, 0.05); */
    font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* 表格样式 */
::v-deep(.dark table tr) {
    background-color: rgb(31 41 55 / 1);
}

::v-deep(.dark table) {
    color: #9e9e9e;
}

::v-deep(.dark table th) {
    border: 1px solid #394048;
}

::v-deep(.dark table td) {
    border: 1px solid #394048;
}

::v-deep(.dark table tr:nth-child(2n)) {
    background-color: rgb(21 41 55 / 1);
}

/* hr 横线 */
::v-deep(.dark hr) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
</style>